$(function() {
        $('.logout').on('click', function() {
            // 点击退出按钮后3件事
            // 1.提示用户退出主页吗
            // 2.删除本地保存的token数据
            // 3.跳转登录页面
            layer.confirm('确认退出吗?', { icon: 3, title: '提示' }, function(index) {
                //do something
                localStorage.removeItem('token');
                location.href = '/login.html';
                // layui库内置的关闭弹出层功能
                layer.close(index);
            });

        })

        initUserMsg();

    })
    // 访问接口,获取用户信息(封装函数)
function initUserMsg() {
    //产生401响应状态码的两种情况：
    //1.没有把token发给服务器
    //2.给服务器发送了一个假 token

    //Promise.prototype.then（成功的回调，失败的回调）
    //在.then函数中，失败的回调可以被省略不写
    axios.get('/my/userinfo').then(({ data: res }) => {
        renderUserMsg(res.data);
    }, (error) => {
        if (error.response.status === 401) {
            localStorage.removeItem('token');
            location.href = '/login.html';
        }
    })

}

// 封装渲染用户头像信息的函数
function renderUserMsg(data) {
    const name = data.nickname || data.username;
    const textAvater = name.charAt(0).toUpperCase();
    //渲染头部区域的用户信息
    //判断用户，是否有图片的头像，如果有，执行if；否则，执行else
    if (data.user_pic) {
        $('#header-avatar').html(`<img src="${data.user_pic}" class="layui-nav-img">
    个人中心`)
    } else {
        //没有图片的头像，应该渲染“文本头像”
        $('#header-avatar').html(`
  <div class="text-avatar">${textAvater}</div>
  个人中心`)
    }
    // 渲染侧边栏用户信息
    if (data.user_pic) {
        // 有图片头像
        $('.user-info-box').html(`<img src="${data.user_pic}" class="layui-nav-img">
    <span class="welcome">&nbsp;欢迎&nbsp; ${name}</span>`)
    } else {
        // 有文本头像
        $('.user-info-box').html(`
    <div class="text-avatar">${textAvater}</div>
    <span class="welcome">&nbsp;欢迎&nbsp; ${name}</span>`)
    }
    //在页面元素动态生成好之后，调用1ayui提供的element.render（）函数重新渲染指定区域的动画效果
    // 这个函数的第一个值是layui里面提供的,第二个值根据自己定义的lay-filter属性名找到
    layui.element.render('nav', 'header-nav');
}

// 切换高亮函数
function highlight(kw) {
    $('dd').removeClass('layui-this');
    $(`dd:contains('${kw}')`).addClass('layui-this');
}